<template>
<div>
     <!-- 头部 -->
    <div class="km-banner-top">
      <div class="km-banner-box">
         <van-icon name="arrow-left" @click="go"/>
        <img
          class="km-banner-logo"
          src="https://kaola-haitao.oss.kaolacdn.com/fd54462a-e0a6-4598-8808-5be6432cd362T2008202125_180_180.png?x-oss-process=image/resize,m_fill,w_80,h_80/quality,q_85/format,webp"
          alt
        />
        <div class="km-banner-content">
          <p class="km-banner-content__line1">新人送168元购物礼包</p>
          <p class="km-banner-content__line2">下载考拉APP领取</p>
        </div>
        <div class="km-banner-btn">立即领取</div>
      </div>
    </div>
</div>
</template>

<script>
export default {
 data () {
return {
}
 },
 methods: {
   go(){
    this.$router.push('/home')
  }
 },
 mounted () {
}
}
</script>

<style lang="scss" scoped>
// 头部样式
.km-banner-top {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
  z-index: 10000;
  height: 60px;
  .km-banner-box {
    display: flex;
    align-items: center;
    height: 60px;
    _background: pink;
  }
  .km-banner-logo {
    width: 44px;
    margin: 0 24px 0 32px;
    margin-top: 8px;
    border-radius: 0.213333rem;
    box-shadow: 0 0 0.093333rem 0 rgba(0, 0, 0, 0.15);
  }
  .km-banner-content__line1 {
    width: 150px;
    height: 23px;
    color: #333;
    font-size: 14px;
    line-height: 0.56rem;
    letter-spacing: 0;
    font-weight: 500;
  }
  .km-banner-content__line2 {
    color: #999;
    font-size: 12px;
    line-height: 0.44rem;
    letter-spacing: 0;
    _margin-top: 14px;
  }
  .km-banner-btn {
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin-left: 64px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0;
    background-image: linear-gradient(90deg, #ff0409, #ff3162);
  }
}

</style>
